<template>
  <div class="swipe-wrap">
      <h4>{{id ? '编辑' : '新增'}}轮播图图片</h4>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="图片名称">
            <el-input v-model="form.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="图片">
              <template>
                <el-upload
                class="upload-demo"
                :action="baseUrl + '/uploads'"
                :headers="getAuthHeader()"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handelSuccess"
                :file-list="fileList"
                :accept="'jpg/png'"
                list-type="picture"
              >
                <template v-if="showup">
                    <el-button size="small" type="primary">点击上传图片</el-button>
                    <div slot="tip" class="el-upload__tip">
                        只能上传jpg/png文件，且不超过500kb
                    </div>
                </template>
                <template v-else>
                    <div slot="tip" class="el-upload__tip">
                        先删除才可以上传哦~
                    </div>
                </template>
              </el-upload>
              </template>
            </el-form-item>
        <el-form-item>
            <el-button class="submit" type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import { creatSwipe, idGetSwipe, updateSwipe } from '../../utils/api/mini'
// import { idGetSwipe } from '../../utils/api/mini'
export default {
    data () {
        return {
            id: '',
            baseUrl: '',
            showup: true,
            fileList: [],
            form: {
                name: '',
                img: []
            }
        }
    },
    created() {
        this.baseUrl = process.env.VUE_APP_BASE_API
        if (this.$route.params.id) {
            this.id = this.$route.params.id
            this.getSwipe()
        }
    },
    mounted() {
        if (this.id) {
            this.showup = false
        }
    },
    methods: {
        async onSubmit () {
            // console.log(this.form, 'submir')
            let res = {}
            if (this.id) {
                res = await updateSwipe(this.id, this.form)
            } else {
                res = await creatSwipe(this.form)
            }
            if (res.code === 200) {
                this.$message({
                    message: '提交成功',
                    type: 'success'
                })
                this.$router.push({
                    path: '/swipeImgList'
                })
            }
        },
        // 文件上传成功后的回调
        handelSuccess(response) {
            this.form.img.push(response.data)
            //  console.log(this.form, 'shang')
            this.showup = false
        },
        // 删除上传文件
        handleRemove(file) {
            this.form.img = this.form.img.filter((v) => v.name != file.name)
            // console.log(this.form, 'del')
            this.showup = true
        },
        // 点击上传文件
        handlePreview(file) {
            console.log(file)
        },
        async getSwipe () {
            let res = await idGetSwipe(this.id)
            this.form = res.data
            this.fileList = res.data.img
            console.log(this.fileList.length)
            if (!this.fileList.length) this.showup = true
        }
    }
}
</script>

<style lang="less" scoped>
@themeColor: #45be93;
    .el-form {
        margin-top: 40px;
        width: 50%;
        .el-button--primary {
            background-color: @themeColor;
            border-color: @themeColor;
        }
        .submit{
            padding: 12px 40px;
            margin-left: 25%;
            margin-top: 60px;
        }
    }
</style>